<!-- 富文本 -->
<script lang="ts" setup>
import { ref } from "vue";
import Editor from '@tinymce/tinymce-vue'


const content = ref();

interface INews {
  title: string
}
const form = ref<INews>({
  title: ""
});
const editorRef = ref();

const addNews = () => {
  let data = {
    title: form.value.title,
    content: editorRef.value.getEditor().getContent()
  }

  console.log("data",data);
  content.value = data.content;
}


</script>

<template>
  <h1>富文本</h1>
  <el-form :model="form">
    <el-form-item label="标题">
      <el-input v-model="form.title" autocomplete="off" />
    </el-form-item>
    <editor ref="editorRef" :init="{
      height: 500,
      menubar: true,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | blocks | ' +
        'bold italic forecolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help | image | table',
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    }" />

    <el-form-item>
      <el-button @click="addNews">添加</el-button>
    </el-form-item>
  </el-form>

  <hr/>
  <div v-html="content"></div>
</template>

<style lang="scss" scoped></style>
